import React from 'react';
import { ChatList } from 'react-chat-elements';
import 'react-chat-elements/dist/main.css';
import { Row, Col, Card } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import {getAllTrailers} from '@/services/trailer/api'
import { getTrailerAllMessageByID } from '@/services/message/api';
import { ChatWidget } from './components/ChatWidget'


class PrivateChatView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userList: [],
      clickUser: null,
    };
  }

  async componentDidMount(){
    let list = [];
    const trailer_list = (await getAllTrailers()).data
    console.log(trailer_list)
    for (let i = 0; i < trailer_list.length; ++i)
      list.push({
        avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
        alt: 'Reactjs',
        title: trailer_list[i],
      });
    this.setState({ userList: list });
    this.setState({ clickUser: list[0] });
    console.log(this.state)
    
    let msg_list = [];
    const message_list = (await getTrailerAllMessageByID(this.state.clickUser.title)).data;
    console.log(message_list);
    for (let i = 0; i < message_list.length; ++i) {
      if (message_list[i].sender.includes('zhk')) {
        msg_list.push({
          position: 'right',
          type: 'text',
          text: message_list[i].message_content,
        });
      } else {
        msg_list.push({
          position: 'left',
          type: 'text',
          text: message_list[i].message_content,
        });
      }
    }
    this.setState({ msgDataList: msg_list });
  }

  onChatListClick = async(e)=>{
    let msg_list = [];
    const message_list = (await getTrailerAllMessageByID(e.title)).data;
    console.log(message_list);
    for (let i = 0; i < message_list.length; ++i) {
      if (message_list[i].sender.includes('zhk')) {
        msg_list.push({
          position: 'right',
          type: 'text',
          text: message_list[i].message_content,
        });
      } else {
        msg_list.push({
          position: 'left',
          type: 'text',
          text: message_list[i].message_content,
        });
      }
    }
    this.setState({ msgDataList: msg_list });
    this.setState({ clickUser: e })
    console.log(this.state)
  }

  render() {
    return (
      <PageContainer>
        <Card>
          <div>
            <Row>
              <Col
                style={{
                  width: '30%',
                  height: 600,
                  display: 'inline-block',
                  border: '3px solid',
                  overflow: 'auto',
                }}
              >
                <ChatList
                  className="chat-list"
                  onClick={this.onChatListClick}
                  dataSource={this.state.userList}
                />
              </Col>
              {this.state.userList.length == 0 ? (
                <div>无私信</div>
              ) : (
                <ChatWidget 
                    user={this.state.clickUser} 
                    msgDataList={this.state.msgDataList}
                />
              )}
            </Row>
          </div>
        </Card>
      </PageContainer>
    );
  }
}

export default PrivateChatView;